<template>
<div class="box">
    <img src="../assets/yy1.png" class="img">
    <div class="quan">
        <img src="../assets/yy2.jpg" class="img1" @click="lingqu">
        <img src="../assets/yy3.jpg" class="img2">
    </div>
    <div class="success" >领取成功</div>
    <div class="main"><div class="m-l"></div><span>有颜有料·又超值</span><div class="m-r"></div></div>
    <div class="swiper-slide"><img src="../assets/潮品分享1.png"> <div class="buy">立即抢购></div></div>
    <div class="swiper-slide"><img src="../assets/潮品分享2.png"> <div class="buy">立即抢购></div></div>
    <div class="swiper-slide"><img src="../assets/潮品分享3.png"> <div class="buy">立即抢购></div></div>
    <div class="swiper-slide"><img src="../assets/潮品分享4.png"> <div class="buy">立即抢购></div></div>
    <div class="swiper-slide"><img src="../assets/潮品分享5.png"> <div class="buy">立即抢购></div></div>
    <div class="swiper-slide"><img src="../assets/潮品分享6.png"> <div class="buy">立即抢购></div></div>
    <div class="tuijian" @click="tiaozhuan">更多新品推荐></div>
</div>
    
</template>
<script>
import axios from "axios";
export default {
    methods:{
        lingqu(){
            var oLq = document.querySelector('.success');
            oLq.style.display = "block"
            setTimeout(function(){
                 oLq.style.display = "none"
            },2000);
        this.sum++
        axios({
        url: " http://localhost:3000/coupons",
        method:"POST",
        data: {
          type: "hot",
          title: "心动七夕5元优惠劵",
          useful: "2021.08.09-2021.08.16",
          price: 5
        }
      })
      .then(res=>{
          console.log(res)
      })
        },
        tiaozhuan(){
            this.$router.push("/Xinpin")
    }
}
    }
</script>
<style scoped>
.box{
    background-color: #e4f2ff;
    position: relative;
}
.img{
    width: 100%;
    height: 4.28rem;
    margin-top: 0.4rem;
}
.quan{
    width: 3.44rem;
    height: 2.5rem;
    background-color: #6aa9f9;
    margin: auto;
    border-radius: 0.03rem;
}
.img1{
    width: 100%;
    height: 0.98rem;
}
.img2{
    width: 100%;
    height: 1.46rem;
    border-bottom-left-radius: 0.03rem;
    border-bottom-right-radius: 0.03rem;
}
.success{
    width: 0.71rem;
    height: 0.31rem;
    background-color: #282828;
    border-radius: 0.03rem;
    position: fixed;
    left: 1.40rem;
    top: 3.10rem;
    color: #fff;
    text-align: center;
    line-height: 0.31rem;
    display: none;
}
.main{
    width: 100%;
    height: 0.6rem;
    text-align: center;
    line-height: 0.6rem;
    font-size: 0.21rem;
    color: #003ebb;
    font-weight: 600;
    display: flex;
    justify-content: center;
}
main span{
    display: block;
    width: 1.6rem;

}
.m-l{
    width: 0.12rem;
    height: 0.12rem;
    border-radius: 50%;
    margin-top: 25px;
    background:-webkit-linear-gradient(left,#e2effe, #0f58c9) ;
    margin-right:0.05rem ;
}
.m-r{
    width: 0.12rem;
    height: 0.12rem;
    border-radius: 50%;
    margin-top: 25px;
    background:-webkit-linear-gradient(left,#0f58c9,#e2effe) ;
    margin-left: 0.05rem;
}

.swiper-slide img{
    width: 3.4rem;
    height: 1.63rem;
    border-radius: 4px;
    display: block;
    margin: auto;
}
.swiper-slide{
    margin-bottom: 0.14rem;
}
.buy{
    width: 0.77rem;
    height: 0.24rem;
    background-color: #06b8ff;
    color: #fff;
    font-size: 0.1rem;
    text-align: center;
    line-height: 0.24rem;
    border: 0.01rem solid white;
    border-top-left-radius: 0.27rem;
    border-top-right-radius: 0.27rem;
    border-bottom-left-radius: 0.27rem;
    border-bottom-right-radius: 0.27rem;
    position: absolute;
    left: 0.2rem;
    bottom: 0.14rem;
}
.tuijian{
    width: 1.86rem;
    height: 0.36rem;
    background-color: #6aa9f9;
    margin: auto;
    text-align: center;
    line-height: 0.36rem;
    color: #fff;
    border-top-left-radius: 0.27rem;
    border-top-right-radius: 0.27rem;
    border-bottom-left-radius: 0.27rem;
    border-bottom-right-radius: 0.27rem;
    font-weight: 600;
}
</style>